<template>
  <div class="assess-page">
    <el-container>
      <el-header style="margin-bottom: 40px">
        <h1>社会实践情况</h1>
        <div style="margin-bottom: 25px">
          <span style="margin-left: 5px"><el-tag type="main">{{ studentId }}</el-tag></span>
          <span style="margin-left: 5px"><el-tag type="success">{{ studentName }}</el-tag></span>
        </div>
      </el-header>
      <el-main>
        <div>
          <el-descriptions :title="item.practiceName" direction="vertical" :column="4" border
                           v-for="(item,index) in list" style="margin-bottom: 20px">
            <el-descriptions-item label="活动主题" :span="2">{{ item.practiceTheme }}</el-descriptions-item>
            <el-descriptions-item label="活动主办方" :span="2">{{ item.practiceSponsor }}</el-descriptions-item>
            <el-descriptions-item label="活动开始日期" :span="2">{{ item.practiceDate }}</el-descriptions-item>
            <el-descriptions-item label="活动持续天数" :span="2">{{ item.practiceLength }}</el-descriptions-item>
            <el-descriptions-item label="职务" :span="4">{{ item.practiceWork }}</el-descriptions-item>
          </el-descriptions>
          <el-input v-model="value" oninput="value=value.replace(/[^0-9.]/g,'')"
                    placeholder="请输入分数" style="margin:10px"></el-input>

          <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
        </div>

      </el-main>
    </el-container>

  </div>
</template>


<style scoped>
.assess-page {
  height: 100%;
  /* left:50%; */
  margin-left: 20%;
  margin-top: 1%;
  padding: 3% 5% 5%;
  /* font-size: 26; */
  width: 50%;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>

<script>
import {acquireSingleItem, acquireSingleStudentAllScores, rate} from "@/api/judge";

export default {
  data() {
    return {
      studentId: '',
      studentName: '',
      list: [],
      value: null,
      loading: false,
    }
  },
  mounted() {
    this.studentId = window.location.search.substring(11);
    const paras1 = {studentId: this.studentId, item: 4}
    acquireSingleItem(paras1).then(res => {
      console.log(res.data);
      this.studentName = res.data.studentName;
      this.list = res.data.itemList;
      // console.log(this.list)
    })
    const paras2 = {studentId: this.studentId}
    acquireSingleStudentAllScores(paras2).then(res => {
      console.log(res)
      this.value = res.data.practiceScore;
    })
  },
  methods: {
    submit() {
      // console.log(this.value)
      if (this.value === null || this.value === '') {
        this.$message.error("请输入分数！")
        return
      }
      this.loading = true;
      // console.log(this.value);
      const paras = {
        studentId: this.studentId,
        type: 4,
        grade: this.value,
      }
      rate(paras).then(res => {
        console.log(res)
        if (res.code == 50003) {
          this.$message.error(res.msg)
          this.loading = false
          return
        }
        this.$message.success(res.data)
        this.loading = false
      }).catch(() => {
        // 修改失败，显示错误提示
        this.$message.error('打分失败')
        this.loading = false
      })
      // TODO: send user data to backend
    }
  }
}
</script>
